<template>
  <div class="px-[16px] pt-[16px] bg-[var(--base-color)] rounded-[8px] mt-[8px] pb-[16px]">
    <FormTitle title="商品信息">
      <el-button link class="ml-[16px]" type="primary" @click="handleCopyMore"
        >复制全部申报信息</el-button
      >
    </FormTitle>
    <vxe-grid v-bind="tableOptions" max-height="300px">
      <template #goods_nums="{ row }">
        <div>{{ row?.goods_nums || "-" }}/{{ row?.goods_unit || "-" }}</div>
      </template>
      <template #goods_price="{ row }">
        <div>
          {{ row?.pre_price }}/{{ row?.pre_total_amount }}/{{
            row?.pre_currency || "-"
          }}
        </div>
        <!-- <div>{{row?.goods_price||'-'}}/{{row?.total_amount||'-'}}/{{row?.currency||'-'}}</div> -->
      </template>
    </vxe-grid>
  </div>
</template>

<script setup lang="jsx">
import { copyText } from "@/utils/tool.js";
import FormTitle from "@/components/Form/FormTitle.vue";
import { performOperation } from "@/utils/currencyHelper.js";
const props = defineProps({
  data: { type: Object, default: () => {} },
});
const tableOptions = reactive({
  round: true,
  columnConfig: {
    resizable: true,
  },
  rowConfig: {
    height: "auto",
  },
  data: [],
  columns: [
    {
      title: "编号",
      type: "seq",
      width: 50,
    },
    {
      field: "",
      title: "操作",
      width: "120",
      slots: {
        default: ({ row }) => {
          return (
            <div>
              <el-button type="primary" link onClick={() => handleCopy(row)}>
                复制申报信息
              </el-button>
            </div>
          );
        },
      },
    },
    {
      title: "采购单号",
      width: 150,
      field: "purchase_numbers",
      slots: { default: ({ row }) => `${row?.purchase_numbers?.join(",")}` },
    },
    {
      title: "系统SKU",
      width: 180,
      field: "sku",
    },
    {
      title: "商品编码",
      width: 180,
      field: "goods_code",
    },
    {
      title: "商品名称",
      width: 160,
      field: "goods_name",
    },
    {
      title: "规格型号",
      width: 160,
      field: "specification",
      cellRender: { name: "arrMap" },
    },
    {
      title: "数量及单位",
      width: 160,
      field: "goods_nums",
      slots: { default: "goods_nums" },
    },
    {
      title: "单价/总价/币制",
      minWidth: 180,
      field: "collect_account_name",
      slots: { default: "goods_price" },
    },
    {
      title: "原产国(地区)",
      width: 120,
      field: "origin_country",
    },
    {
      title: "最终目的国(地区)",
      width: 140,
      field: "destination_country",
    },
    {
      title: "境内货源地",
      width: 120,
      field: "domestic_sources",
    },
    {
      title: "头程备库单号",
      minWidth: 200,
      field: "tc_number",
      slots: { default: ({ row }) => `${row?.tc_numbers?.join(",")}` },
    },
  ],
});

watch(
  () => props.data,
  (val) => {
    if (val) {
      tableOptions.data = val;
    }
  }
);
const dataInfo = inject("currencyAndRate");
watch(
  () => dataInfo.value,
  (val) => {
    const { currency, exchange_rate = 1 } = val;
    if (!currency) return;
    let tableData = JSON.parse(JSON.stringify(tableOptions.data));
    tableData.forEach((item) => {
      const { goods_price, goods_nums } = item;
      item.pre_currency = currency;
      item.pre_price = performOperation(
        "divide",
        goods_price,
        exchange_rate
      ).value;
      item.pre_total_amount = performOperation(
        "multiply",
        item.pre_price,
        goods_nums
      ).value;
    });
    tableOptions.data = tableData;
  },
  {
    deep: true,
  }
);
const copyData = (row) => {
  return [
    // row?.tc_number || "",
    // row.sku || "",
    row.goods_name || "",
    row.goods_nums || "",
    row.goods_unit || "",
    row.pre_price || "",
    row.pre_total_amount || "",
  ].join("\t");
};

const handleCopy = (row) => {
  const dataString = copyData(row);
  copyText(dataString);
};

const handleCopyMore = () => {
  const formattedData = tableOptions?.data?.map(copyData).join("\n") || ""; // 用换行符分隔每行
  copyText(formattedData);
};
</script>

<style lang="scss" scoped></style>
